<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>网站信息</title>
    <link rel="stylesheet" href="../../css/pintuer.css">
    <link rel="stylesheet" href="../../css/admin.css">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="../../js/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>

    <script src="../../js/pintuer.js"></script>
    <script src="../../js/jquery.form.js"></script>
</head>

<body>
    <div class="container">
        <div id="info"></div>
        <!-- Large modal -->
        <!-- <button type="button" class="btn btn-primary" onclick="location.reload()">刷新</button> -->

        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
            id="myModal">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="panel admin-panel">

                        <div id="info"></div>
                        <div class="panel-head"><strong><span class="icon-pencil-square-o"></span>费用充值</strong></div>
                        <div class="body-content">
                            <form class="form-x" id="assetForm" enctype="multipart/form-data">
                                <div class="form-group">
                                    <div class="label">
                                        <label>用户名：</label>
                                    </div>
                                    <div class="field">
                                        <input type="text" id="url1" name="username" class="input tips"
                                            style="width:50%; float:left;" readonly value="" />
                                        <div class="tips"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="label">
                                        <label>卡号：</label>
                                    </div>
                                    <div class="field">
                                        <input type="text" id="url2" name="idcard" class="input tips"
                                            style="width:50%; float:left;" value="" readonly />
                                        <div class="tips"></div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="label">
                                        <label>余额：</label>
                                    </div>
                                    <div class="field">
                                        <div class="input-group">
                                            <span class="addon">￥</span>
                                            <input class="input" type="text" id="money" name="balance" placeholder="金额"
                                                readonly /><span class="addon">元</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="label">
                                        <label>充值金额：</label>
                                    </div>
                                    <div class="field">
                                        <div class="input-group">
                                            <span class="addon">￥</span>
                                            <input class="input" type="text" id="money" name="money"
                                                placeholder="金额" /><span class="addon">元</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="label">
                                        <label></label>
                                    </div>
                                    <div class="field" style="margin-top: 20px">
                                        <button class="button bg-main icon-check-square-o" type="button"
                                            id="agreementSub"> 提交</button>
                                        <button class="button bg-red icon-times" type="button" id="buttonclose">
                                            关闭</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script>
    let key = 1;
    // let userdata = {}
    function show() {
        $('#myModal').modal({
            show: true
        })
    }
    $('#buttonclose').click(function () {
        // alert(1)
        $('#myModal').modal('hide')
    })
    function getData() {
        $.ajax({
            url: 'http://localhost:3000/api/user/data',
            dataType: 'json',
            type: 'get',
            data: {},
            success: function (data) {
                // data = JSON.parse(data)
                console.log('getData()', data.code)
                // return
                // let str = JSON.parse(data)
                if (data.code == 0) {
                    let str2

                    str2 =
                        `
                    <div class="alert alert-red">
                      <span class="close rotate-hover"></span><strong>注意：</strong>${data.msg}</div>
                    </div>
                `
                    $('#info').html(str2)
                    setTimeout(function () {
                        $('#info').html('')
                    }, 20000)
                } else if (data.code == 9) {
                    // console.log('asdasdsad')
                    let str3

                    str3 =
                        `
                    <div class="alert alert-blue">
                      <span class="close rotate-hover"></span><strong>友情提示：</strong>${data.msg}！</div>
                    </div>
                `
                    $('#info').html(str3)
                    setTimeout(function () {
                        $('#info').html('')
                    }, 20000)
                }

                else {
                    // console.log(JSON.parse(str))
                    // userdata = JSON.parse(str)
                    // console.log(userdata.idcard)
                    if (key == 1) {
                        searchUser(data)
                        key = 0;
                    }
                }
            },
            error: function (err) {
                console.log('err', err)
            }
        })
    }
    $('#agreementSub').on('click', function () {
        // alert(1)
        $('#assetForm').ajaxSubmit({
            url: 'http://127.0.0.1:3000/api/user/adduserbalance',
            type: 'get',
            dataType: 'jsonp',
            data: $('#assetForm').serialize(),
            success: function (data) {
                console.log(data)
                if (data.code == 1) {
                    if (confirm(data.msg)) {
                        $('#myModal').modal('hide')
                    } else {
                        return
                    }

                } else if (data.code == 0) {
                    alert(data.msg)
                } else {
                }
            },
            error: function (err) {
                console.log(err)
            },
            clearForm: false, //禁止清除表单
            resetForm: false //禁止重置表单
        })
    })
    setInterval(getData, 1000)
    function searchUser(temp) {
        console.log(temp)
        $.ajax({
            url: `http://localhost:3000/api/user/selectuserByIdcard?idcard=${temp.idcard}`,
            dataType: 'json',
            type: 'get',
            data: {},
            success: function (data) {
                // data = JSON.parse(data)
                console.log('根据卡号查询返回', data)
                // if(data.code !=0){}
                if (data.result.length != 0) {
                    document.getElementsByTagName('input')[0].value = data.result[0].username
                    document.getElementsByTagName('input')[1].value = data.result[0].idcard
                    document.getElementsByTagName('input')[2].value = data.result[0].balance
                    show()

                } else {
                    let str2

                    str2 =
                        `
                    <div class="alert alert-red">
                      <span class="close rotate-hover"></span><strong>注意：</strong>没有该用户信息</div>
                    </div>
                `
                    $('#info').html(str2)
                    setTimeout(function () {
                        $('#info').html('')
                    }, 20000)
                }
            },
            error: function (err) {
                console.log('err', err)
            }
        })
    }
</script>

</html>
<!-- {"idcard":"123",balance:"500"} -->